<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>业务范围</title>
    <link rel="stylesheet" href="../../common/reset.css">
    <link rel="stylesheet" href="style.css">
</head>

<body>
    <div id="app">
        <div class="mod-business">
            <h1 class="business-title">业务范围</h1>
            <h2 class="business-dec">全方位车主服务平台</h2>
            <div class="swiper-container">
                <div class="swiper-wrap">
                    <div style="overflow:hidden">
                        <div class="swiper-item" style="left: 0;">
                            <div class="swiper-item__list">
                                <img src="./image/001.png" alt="">
                            </div>
                            <div class="swiper-item__list">
                                <img src="./image/002.png" alt="">
                            </div>
                            <div class="swiper-item__list">
                                <img src="./image/003.png" alt="">
                            </div>
                            <div class="swiper-item__list">
                                <img src="./image/004.png" alt="">
                            </div>
                        </div>
                    </div>
                    <div class="swiper-control">
                        <div class="control-left"></div>
                        <div class="control-right"></div>
                        <div class="arrow-left"></div>
                        <div class="arrow-right"></div>
                    </div>
                </div>

            </div>
        </div>
        <div class="mod-business mod-business-hide">
            <h1 class="business-title business-title--hide">业务范围</h1>
            <h2 class="business-dec business-dec--hide">全方位车主服务平台</h2>
            <div class="business-links">
                <div class="business-link">
                    <img src="./image/icon1.png" alt="">
                    <h2 class="business-link__title">代驾</h2>
                    <p>专业代驾公司</p>
                    <p>安全有保障</p>
                </div>
                <div class="business-link">
                    <img src="./image/icon2.png" alt="">
                    <h2 class="business-link__title">道路救援</h2>
                    <p>搭电、换胎</p>
                    <p>拖车、送油</p>
                </div>
                <div class="business-link">
                    <img src="./image/icon3.png" alt="">
                    <h2 class="business-link__title">爱车估值</h2>
                    <p>汇集历史数据</p>
                    <p>报价更精准</p>
                </div>
                <div class="business-link">
                    <img src="./image/icon4.png" alt="">
                    <h2 class="business-link__title">扫码挪车</h2>
                    <p>手机扫一扫</p>
                    <p>车主来挪车</p>
                </div>
                <div class="business-link">
                    <img src="./image/icon5.png" alt="">
                    <h2 class="business-link__title">保险</h2>
                    <p>可在线比价</p>
                    <p>价格更透明</p>
                </div>
                <div class="business-link">
                    <img src="./image/icon6.png" alt="">
                    <h2 class="business-link__title">汽车金融</h2>
                    <p>多种付款方式</p>
                    <p>购车无压力</p>
                </div>
                <div class="business-link">
                    <img src="./image/icon7.png" alt="">
                    <h2 class="business-link__title">违章查询</h2>
                    <p>全国联网</p>
                    <p>实时提醒</p>
                </div>
                <div class="business-link">
                    <img src="./image/icon8.png" alt="">
                    <h2 class="business-link__title">加油</h2>
                    <p>充值越多</p>
                    <p>折扣越多</p>
                </div>
            </div>
            <div class="business-border">
                <img src="./image/icon1.png" alt="">
            </div>
        </div>
        <div class="bussiness-switch"></div>
    </div>
</body>
<script>
    const app = document.getElementById('app')
    const btn = document.body.querySelector('.bussiness-switch')
    const hide = document.body.querySelector('.mod-business-hide')
    const links = document.body.querySelectorAll('.business-link')
    const oldImage = document.body.querySelector('.business-border').querySelector('img')
    const leftControl = document.body.querySelector('.control-left')
    const rightControl = document.body.querySelector('.control-right')
    const swiperItem = document.body.querySelector('.swiper-item')
    const swiperList = document.body.querySelectorAll('.swiper-item__list')
    btn.onclick = function () {
        if (btn.classList.length === 1) {
            hide.style.left = 0
            btn.classList.add('bussiness-switch--close')
        } else {
            hide.style.left = '100%'
            btn.classList.remove('bussiness-switch--close')
        }

    }
    for (let i = 0; i < links.length; i++) {
        links[i].onmouseover = function () {
            let newImg = this.querySelector('img')
            oldImage.src = newImg.src
        }
        links[i].onmouseout = function () {
            oldImage.src = ''
        }
    }
    rightControl.onclick = throttle(function () {
        const max = (swiperList.length - 3) * 340
        if (-swiperItem.offsetLeft >= max) return
        swiperItem.style.left = swiperItem.offsetLeft - 340 + 'px'
    }, 501)
    leftControl.onclick = throttle(function () {
        if (swiperItem.offsetLeft >= 0) return
        swiperItem.style.left = swiperItem.offsetLeft + 340 + 'px'
    }, 501)
    // 节流
    function throttle(func, wait) {
        let previous = 0;
        return function () {
            let now = +new Date();
            let context = this;

            if (now - previous >= wait) {
                console.log(arguments)
                func.apply(context, arguments);
                previous = now; // 执行后更新 previous 值
            }
        }
    }
</script>

</html>